<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <!-- <span>总记录数: {{ total }} 条</span> -->
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addConfig">新增城市</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px">
      <el-table :data="configList" border>
        <el-table-column label="序号" type="index" fixed="left" width="60" sortable />
        <el-table-column label="id" prop="id" fixed="left" width="60" sortable />
        <el-table-column label="客服电话（统一）" prop="phone" width="130" />
        <el-table-column label="活动" width="400">
          <template #default="{ row }">
            <img v-for="item in row.activity_list" :key="item.id" :src="item.img" class="img-item" />
          </template>
        </el-table-column>
        <el-table-column label="充值规则" width="200">
          <template #default="{ row }">
            <ul class="recharge-box">
              <li>
                <span>充值金额</span>
                <span>赠送金额</span>
              </li>
              <li v-for="item in row.recharge_money" :key="item.id">
                <span>{{ item.money }}</span>
                <span>{{ item.give }}</span>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="是否上线" width="100">
          <template #default="{ row }">
            <el-switch
              :value="row.status === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editConfig(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <add-edit ref="AddEditDialog" @refresh="getConfigListAll" />
  </div>
</template>

<script>
import { getConfigListAll, updateOneConfigById } from '@/api/config'
import { formatTime } from '@/filters/index'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'ConfigList',
  components: {
    AddEdit
  },
  filters: {
    formatTime
  },
  data() {
    return {
      isLoading: 0,
      configList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getConfigListAll()
  },
  mounted() {},
  methods: {
    addConfig() {
      this.$refs.AddEditDialog.open()
    },
    editConfig(row) {
      this.$refs.AddEditDialog.open(row)
    },
    changeStatus(row) {
      this.$confirm('确定要进行此次操作么？', '温馨提示')
        .then(async() => {
          try {
            this.isLoading++
            await updateOneConfigById({
              id: row.id,
              status: row.status === 1 ? -1 : 1
            })

            await this.getConfigListAll()
          } finally {
            this.isLoading--
          }
        })
        .catch(() => {
          console.log('取消')
        })
    },
    async getConfigListAll() {
      try {
        this.isLoading++
        this.configList = await getConfigListAll()
      } finally {
        this.isLoading--
      }
    }
    // indexMethod(index) {
    //   return index + 1 + (this.page - 1) * this.size
    // },
    // handleSizeChange() {},
    // handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.recharge-box {
  list-style: none;
  li {
    display: flex;
    span {
      width: 100px;
    }
  }
}
.img-item {
  height: 80px;
  margin: 0 5px;
}
</style>
